<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="开始时间：">
              <el-date-picker
                v-model="startDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="所属区域：">
              <el-select
                v-model="order"
                placeholder="请选择"
                style="width: 180px"
              >
                <el-option
                  v-for="item in ClientNoAll"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="餐饮单位：">
              <el-input v-model="pointName" style="width: 180px"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getLisencePlateList"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="handleAdd"
              >新 增</el-button
            >
            <!-- <el-button size="mini" type="success" @click="showTableDataAlarm"
              >逾期报警</el-button
            > -->
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="结束时间：">
              <el-date-picker
                v-model="endDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
    >
      <el-table-column
        prop="订单编号"
        label="订单编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="餐饮单位名称"
        label="餐饮单位名称"
        align="center"
        width="400"
      ></el-table-column>
      <el-table-column
        prop="门头名称"
        label="门头名称"
        align="center"
        width="400"
      ></el-table-column>
      <el-table-column
        prop="所属区域"
        label="所属区域"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="预收运日期"
        label="预收运日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="申请日期"
        label="申请日期"
        align="center"
      ></el-table-column>
      <el-table-column prop="订单状态" label="订单状态"></el-table-column>
      <!-- <el-table-column
        prop="收运生效日期"
        label="收运生效日期"
      ></el-table-column>
      <el-table-column prop="申请时间" label="申请时间"></el-table-column>
      <el-table-column prop="审核状态" label="审核状态"></el-table-column> -->
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleShowOrderDetail(scope.$index, scope.row)"
            >详情</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.订单状态 === '待分配'"
            @click="handleShowReject(scope.$index, scope.row)"
            >分配</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="isVisibleEdit"
      width="60%"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="8.529vw"
        class="flex"
      >
        <el-form-item label="所属区域：" class="wid50" prop="CLIENT_NO">
          <el-select
            filterable
            v-model="form.CLIENT_NO"
            placeholder="请选择所属区域"
            @change="getPlacePointInfo(form.CLIENT_NO)"
            style="width: 15.625vw"
          >
            <el-option
              v-for="item in ClientNo"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="餐饮单位名称：" class="wid50" prop="Point_ID">
          <el-select
            filterable
            v-model="form.Point_ID"
            placeholder="请先选择所属区域"
            @change="getPlacePointNameInfo(form.Point_ID)"
            style="width: 15.625vw"
          >
            <el-option
              v-for="item in PointList"
              :key="item.ID"
              :label="item.NAME"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="门头名称：" class="wid50" prop="Point_Name">
          <el-select
            v-model="form.Point_Name"
            placeholder="请先选择餐饮单位名称"
            filterable
            @change="$forceUpdate()"
            style="width: 15.625vw"
          >
            <el-option
              v-for="item in PointNameList"
              :key="item.NAME"
              :label="item.NAME"
              :value="item.NAME"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收运地址：" class="wid50" prop="LOCATION">
          <el-input
            v-model="form.LOCATION"
            placeholder="请输入收运地址"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人：" class="wid50" prop="CONTRACTER">
          <el-input
            v-model="form.CONTRACTER"
            placeholder="请输入联系人"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" class="wid50" prop="PHONE">
          <el-input
            v-model="form.PHONE"
            placeholder="请输入联系电话"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="预收油脂种类：" class="wid50" prop="arrOil">
          <el-select
            v-model="form.arrOil"
            placeholder="请选择预收油脂种类"
            multiple
            collapse-tags
            @change="$forceUpdate()"
            style="width: 15.625vw"
          >
            <el-option
              v-for="item in OilTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预收油脂重量：" class="wid50" prop="OILNUM">
          <el-input
            v-model="form.OILNUM"
            placeholder="请输入预收油脂重量"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="预收运日期：" class="wid50" prop="WORKTIME">
          <el-date-picker
            v-model="form.WORKTIME"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="$forceUpdate()"
            style="width: 15.625vw"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注信息：" style="height: 230px">
          <el-input
            type="textarea"
            :rows="9"
            v-model="form.REMARK"
            placeholder="请输入备注信息"
            class="handle-input mr10"
            style="width: 44vw; border: 1px solid #a4aca7"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 逾期报警列表 -->
    <el-dialog
      title="逾期未申请收运商户信息"
      :visible.sync="showAlarm"
      width="50%"
    >
      <el-table :data="tableDataAlarm">
        <el-table-column prop="点位名称" label="订单日期"></el-table-column>
        <el-table-column prop="签批时间" label="签批时间"></el-table-column>
        <el-table-column prop="联系人" label="联系人"></el-table-column>
        <el-table-column prop="联系电话" label="联系电话"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 分配订单窗口 -->
    <el-dialog title="分配订单" :visible.sync="showReject" width="50%">
      <el-form class="flex" ref="form" :model="form" label-width="120px">
        <el-form-item label="可分配车辆：" class="wid50">
          <el-select
            v-model="form.VID"
            placeholder="请选择可分配车辆"
            @change="$forceUpdate()"
          >
            <el-option
              v-for="item in CarList"
              :key="item.VID"
              :label="item.LICENSE_PLATE"
              :value="item.VID"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="可分配司机：" class="wid50">
          <el-select
            v-model="form.DID"
            placeholder="请选择可分配司机"
            filterable
            @change="$forceUpdate()"
          >
            <el-option
              v-for="item in DriverList"
              :key="item.DID"
              :label="item.NAME"
              :value="item.DID"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showReject = false">取 消</el-button>
        <el-button type="primary" @click="rejectCollectionApply()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 订单详情窗口 -->
    <el-dialog title="订单详情" :visible.sync="showOrderDetail" width="60%">
      <el-descriptions :column="2" size="mini" border>
        <el-descriptions-item label="订单编号">
          {{ formRow[0].订单编号 }}
        </el-descriptions-item>
        <el-descriptions-item label="餐饮单位名称">
          {{ formRow[0].餐饮单位名称 }}
        </el-descriptions-item>
        <el-descriptions-item label="门头名称">
          {{ formRow[0].门头名称 }}
        </el-descriptions-item>
        <el-descriptions-item label="所属区域">
          {{ formRow[0].所属区域 }}
        </el-descriptions-item>
        <el-descriptions-item label="收运地址">
          {{ formRow[0].收运地址 }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ formRow[0].联系人 }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ formRow[0].联系电话 }}
        </el-descriptions-item>
        <el-descriptions-item label="预收油脂种类">
          {{ formRow[0].预收油脂种类 }}
        </el-descriptions-item>
        <el-descriptions-item label="预收油脂重量">
          {{ formRow[0].预收油脂重量 }}
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          {{ formRow[0].订单状态 }}
        </el-descriptions-item>
        <el-descriptions-item label="预收运日期">
          {{ formRow[0].预收运日期 }}
        </el-descriptions-item>
        <el-descriptions-item label="申请日期">
          {{ formRow[0].申请日期 }}
        </el-descriptions-item>
        <el-descriptions-item label="备注信息">
          {{ formRow[0].备注信息 }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
import '../../assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < new Date(new Date().getTime() - 3600 * 1000 * 24);
        },
      },
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      tableData: [],
      tableDataAlarm: [],
      ClientNoAll: [],//所属区域-全
      ClientNo: [],//所属区域
      PointList: [],//餐饮单位
      PointNameList: [],//门头名称
      CarList: [],//车辆
      DriverList: [],//司机
      OilTypeList: [{
        value: '5',
        label: '地沟油'
      }, {
        value: '4',
        label: '潲水油'
      }, {
        value: '3',
        label: '动物油'
      }, {
        value: '2',
        label: '隔离油'
      }, {
        value: '1',
        label: '煎炸油'
      }, {
        value: '0',
        label: '其他'
      }],
      form: {
        CLIENT_NO: '',
        Point_ID: '',
        Point_Name: '',
        VID: '',
        arrOil: [],
      },
      formRow: [{}],
      startDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30), 'yyyy-MM-dd'),
      endDate: formatDate(new Date(new Date().getTime() + 3600 * 1000 * 24 * 30), 'yyyy-MM-dd'),
      pointName: '',
      order: '',
      select: {
        OrderType: [],
      },
      rules: {
        CLIENT_NO: [
          { required: true, message: '请选择所属区域', trigger: 'change' }
        ],
        Point_ID: [
          { required: true, message: '请选择餐饮单位名称', trigger: 'blur' }
        ],
        Point_Name: [
          { required: true, message: '请选择门头名称', trigger: 'blur' }
        ],
        LOCATION: [
          { required: true, message: '请输入收运地址', trigger: 'blur' }
        ],
        CONTRACTER: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        PHONE: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        arrOil: [
          { required: true, message: '请选择预收油脂种类', trigger: 'blur' }
        ],
        OILNUM: [
          { required: true, message: '请输入预收油脂重量', trigger: 'blur' }
        ],
        WORKTIME: [
          { type: 'date', required: true, message: '请选择预收运日期', trigger: 'change' }
        ],
      },
      showOrderDetail: false,
      showReject: false,
      showAlarm: false,
      isVisibleEdit: false,
    }
  },
  mounted () {
    this.getClientInfoAll();
    this.getClientInfo();
    this.getLisencePlateList();
    this.getCarInfo();
    this.getDriverInfo();
    // this.getTableData();
  },
  methods: {
    //获取所属区域信息-全
    async getClientInfoAll () {
      var url = 'VehicleOil/getClientInfoJD_Title?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.ClientNoAll = data
    },

    //获取所属区域信息
    async getClientInfo () {
      var url = 'VehicleOil/getClientInfoJD?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.ClientNo = data
    },


    //获取餐饮单位列表
    async getPlacePointInfo (CLIENT_NO) {
      this.form.Point_ID = ''
      this.form.Point_Name = ''
      // this.PointNameList = []
      var url = 'VehicleOil/getPlacePointInfoJD?ClientNo=' + CLIENT_NO
      const { data } = await this.$Http.get(url)
      this.PointList = data
    },

    //获取门头名称
    async getPlacePointNameInfo (ID) {
      this.form.Point_Name = ''
      var url = 'VehicleOil/getPlacePointName?ID=' + ID
      const { data } = await this.$Http.get(url)
      this.PointNameList = data
      this.form.Point_Name = this.PointNameList[0].NAME
    },

    //获取订单信息
    async getLisencePlateList () {
      var url = 'VehicleOil/GetJDOrderInfo?ClientNo=' + this.order + '&StartDate=' + this.startDate
        + '&EndDate=' + this.endDate + '&Name=' + this.pointName
      const { data } = await this.$Http.get(url)
      this.tableData = data
    },

    //获取车辆列表
    async getCarInfo () {
      var url = 'VehicleOil/getCarInfoJD?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.CarList = data
    },

    //获取司机列表
    async getDriverInfo () {
      var url = 'VehicleOil/getDriverInfoJD?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.DriverList = data
    },
    async updateApplyStatus (pointID) {
      var url = 'Sign/UpdataPlaceApplyIsorder?POINT_ID=' + pointID
      const { data } = await this.$Http.get(url)
      if (data.IsSucess) {
        this.$message.success('申请审核成功')
        this.getTableData()
      } else {
        this.$message.error('审核失败，请重新审核')
      }
    },
    showTableDataAlarm () {
      this.getTableDataAlarm();
      this.showAlarm = true;
    },
    handleShowReject (index, row) {
      this.form = Object.assign({}, row);
      this.showReject = true;
    },

    // 打开详情窗口
    handleShowOrderDetail (index, row) {
      //清空编辑框
      // this.form = {}
      this.form = Object.assign({}, row);
      this.form.编号 = row.订单编号
      this.getJDOrderDetailList();
    },
    // 详情

    async getJDOrderDetailList () {

      var url = 'VehicleOil/GetJDOrderDetail?ID=' + this.form.编号
      const { data } = await this.$Http.get(url)
      this.formRow = data;
      this.showOrderDetail = true;
    },
    // 签批
    handleSign (index, row) {
      this.$confirm('确认同意此申请？', '提示', {
        confirmButtonText: '同意',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateApplyStatus(row.POINT_ID)
      }).catch(() => {
      });
    },
    formatterBucketType (row, column, cellValue, index) {
      switch (cellValue) {
        case '1':
          return '120L';
        case '2':
          return '240L';
        case '3':
          return '铁桶';
        default:
          break;
      }
    },
    // 打开新增窗口
    handleAdd () {
      this.addDialogTitle = '新增订单信息'
      //清空编辑框
      this.form = {}
      // this.form.WORKTIME = formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      //展示窗口
      this.isVisibleEdit = true;
      // this.idEdit = false;
    },
    // 打开编辑窗口
    handleEdit (index, row) {
      this.form = Object.assign({}, row);
      this.addDialogTitle = '编辑订单信息'
      this.isVisibleEdit = true;
    },
    // 点击保存，判断是新增还是编辑操作
    handleSubmit () {
      if (this.form.CLIENT_NO == '' || this.form.CLIENT_NO == null || this.form.Point_ID == '' || this.form.Point_ID == null ||
        this.form.Point_Name == '' || this.form.Point_Name == null || this.form.LOCATION == '' || this.form.LOCATION == null ||
        this.form.CONTRACTER == '' || this.form.CONTRACTER == null || this.form.PHONE == '' || this.form.PHONE == null ||
        this.form.arrOil.length == 0 || this.form.arrOil == null || this.form.OILNUM == '' || this.form.OILNUM == null ||
        this.form.WORKTIME == '' || this.form.WORKTIME == null) {
        this.$message.warning(`必须项不得为空`);
      } else {
        if (this.addDialogTitle == '新增订单信息') {
          this.saveAdd()
        } else {
          this.saveEdit()
        }
      }
    },
    // 新增保存
    async saveAdd () {
      var str = '';
      this.form.arrOil.forEach(element => {
        str = str + element + '、'
      });
      str = str.substring(0, str.length - 1);
      this.form.OIL_TYPE = str
      this.$axios({
        url: 'VehicleOil/AddJDOrderInfo',
        method: 'post',
        data: {
          Point_ID: this.form.Point_ID,
          LOCATION: this.form.LOCATION,
          CONTRACTER: this.form.CONTRACTER,
          PHONE: this.form.PHONE,
          WORKTIME: this.form.WORKTIME,
          OIL_TYPE: this.form.OIL_TYPE,
          OILNUM: this.form.OILNUM,
          REMARK: this.form.REMARK,
          VID: '0',
          DID: '0',
          ORDERSTATUS: '-1',
        },

      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功');
          this.isVisibleEdit = false
          this.getLisencePlateList()
        } else {
          this.$message.error('新增失败');
        }
      })

    },
    // 分配订单
    async rejectCollectionApply () {
      var url = 'VehicleOil/UpdataJDOrderInfo?VID=' + this.form.VID + '&DID=' + this.form.DID + '&ID=' + this.form.订单编号
      this.$axios({
        url: url,
        method: 'get',
      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('分配成功');
          this.showReject = false
          this.getLisencePlateList()
        } else {
          this.$message.error('分配失败');
        }
      })

    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange (size) {
      this.pageSize = size;
      this.currentPage = 1;
    },
  }
}
</script>
